import BsButton from "@lib/Button";
import SolidModal from "@lib/Modal";
import type { RouteDefinition } from "@solidjs/router";
import { Button, Modal } from "bootstrap";
import {
  createEffect,
  createMemo,
  createSignal,
  on,
  onCleanup,
} from "solid-js";
import type { JSX } from "solid-js/jsx-runtime";

const ModalDemo = () => {
  const open: JSX.HTMLAttributes<HTMLButtonElement>["onclick"] = (e) => {
    e.stopPropagation();
    modal()?.show();
  };

  const [modal, setModal] = createSignal<Modal | undefined>(undefined);

  const [modalEl, setModalEl] = createSignal<HTMLDivElement | null>(null);
  const jsModal = createMemo(() => {
    const el = modalEl();
    if (!el) {
      return undefined;
    }
    return SolidModal.useModal(el!);
  });

  const openViaJavascript = () => {
    jsModal()?.show();
  };

  return (
    <div>
      <div>
        <h1>原始</h1>
        <button
          type="button"
          class="btn btn-primary"
          data-bs-toggle="modal"
          data-bs-target="#exampleModal"
        >
          Launch demo modal
        </button>

        <div
          class="modal fade"
          id="exampleModal"
          tabindex="-1"
          aria-labelledby="exampleModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">
                  Modal title
                </h1>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div class="modal-body">...</div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  Close
                </button>
                <button type="button" class="btn btn-primary">
                  Save changes
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <h1>Base</h1>
        <button
          type="button"
          class="btn btn-primary"
          onclick={open}
          onkeydown={(e) => console.log("button", e)}
        >
          open
        </button>
        <SolidModal
          id="exampleModal"
          onRef={setModal}
          fade
          onShow={() => console.log("modal show")}
          onShown={() => console.log("modal shown")}
          onHidden={() => console.log("modal hidden")}
          onHide={() => console.log("modal hide")}
          options={{ keyboard: false, backdrop: "static" }}
          scrollable
          centered
        >
          <SolidModal.Header>
            <SolidModal.Title classes={"fs-5"}>Modal Title2</SolidModal.Title>
            <SolidModal.CloseButton></SolidModal.CloseButton>
          </SolidModal.Header>
          <SolidModal.Body>...</SolidModal.Body>
          <SolidModal.Footer>
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary">
              Save changes
            </button>
          </SolidModal.Footer>
        </SolidModal>
      </div>
      <hr />
      <div>
        <h1>Toggle Between Modals</h1>
        <button
          type="button"
          class="btn btn-primary"
          data-bs-toggle="modal"
          data-bs-target="#exampleModalToggle"
        >
          Open first modal
        </button>
        <SolidModal id="exampleModalToggle" centered>
          <SolidModal.Header>
            <SolidModal.Title classes={"fs-5"}>Modal 1</SolidModal.Title>
            <SolidModal.CloseButton></SolidModal.CloseButton>
          </SolidModal.Header>
          <SolidModal.Body>
            Show a second modal and hide this one with the button below.
          </SolidModal.Body>
          <SolidModal.Footer>
            <button
              class="btn btn-primary"
              data-bs-target="#exampleModalToggle2"
              data-bs-toggle="modal"
            >
              Open second modal
            </button>
          </SolidModal.Footer>
        </SolidModal>
        <SolidModal id="exampleModalToggle2" centered>
          <SolidModal.Header>
            <SolidModal.Title classes={"fs-5"}>Modal 2</SolidModal.Title>
            <SolidModal.CloseButton></SolidModal.CloseButton>
          </SolidModal.Header>
          <SolidModal.Body>
            Hide this modal and show the first with the button below.
          </SolidModal.Body>
          <SolidModal.Footer>
            <button
              class="btn btn-primary"
              data-bs-target="#exampleModalToggle"
              data-bs-toggle="modal"
            >
              Back to first
            </button>
          </SolidModal.Footer>
        </SolidModal>

        <h1>Full screen</h1>
        <BsButton
          data-bs-toggle="modal"
          data-bs-target="#exampleFullScreenModal"
        >
          toggleFullScreenModal
        </BsButton>
        <SolidModal id="exampleFullScreenModal" fullscreen scrollable>
          <SolidModal.Header>
            <SolidModal.Title classList={{ "fs-4": true }}>
              Im Title
            </SolidModal.Title>
            <SolidModal.CloseButton></SolidModal.CloseButton>
          </SolidModal.Header>
          <SolidModal.Body>Body</SolidModal.Body>
          <SolidModal.Footer>
            <BsButton variant={"secondary"}>取消</BsButton>
            <BsButton variant={"primary"}>确认</BsButton>
          </SolidModal.Footer>
        </SolidModal>
      </div>
      {/* <div>
        <h1>Via Javascript</h1>
        <button
          type="button"
          class="btn btn-primary"
          onClick={openViaJavascript}
        >
          open
        </button>
        <div class="modal" ref={setModalEl}></div>
      </div> */}
    </div>
  );
};

export const ModalDemoRoute: RouteDefinition = {
  path: "/modal",
  component: ModalDemo,
};

export default ModalDemo;
